<template>
  <d2-container>
    <el-form inline
             style="width: 100%; text-align: left"
             label-width="80px"
             ref="form"
             size="small">
      <el-form-item label="标题">
        <el-input v-model="query.keywords"
                  placeholder="发布人ID|投诉人ID|标题|任务号"
                  style="width: 250px"
                  clearable
                  @keypress.enter="onSubmit"
        ></el-input>
      </el-form-item>
      <el-form-item label="筛选创建时间" label-width="100px">
        <el-date-picker
          v-model="query.start_time"
          type="date"
          size="small"
          style="width: 180px"
          format="yyyy-MM-dd"
          :picker-options="startTimePickerOption"
          value-format="timestamp"
          placeholder="选择开始日期">
        </el-date-picker>
        -
        <el-date-picker
          v-model="query.end_time"
          type="date"
          size="small"
          style="width: 180px"
          format="yyyy-MM-dd"
          :picker-options="endTimePickerOption"
          value-format="timestamp"
          placeholder="选择结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="举报类型">
        <el-select v-model="query.type">
          <el-option label="全部"
                     value=""></el-option>
          <el-option label="任务内容违规"
                     value="1"></el-option>
          <el-option label="已过期，无法进行任务"
                     value="2"></el-option>
          <el-option label="其他"
                     value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="审核状态">
        <el-select v-model="query.status">
          <el-option label="全部"
                     value=""></el-option>
          <el-option label="待审核"
                     value="0"></el-option>
          <el-option label="审核通过"
                     value="1"></el-option>
          <el-option label="审核失败"
                     value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   native-type="submit"
                   @click="onSubmit"
        >筛选
        </el-button>
<!--        <el-button native-type="reset">重置</el-button>-->
      </el-form-item>
    </el-form>
    <el-table :data="list"
              border
              :resizable="false"
              stripe>
      <el-table-column label="任务号"
                       prop="task_id"></el-table-column>
      <el-table-column label="发布人ID"
                       prop="target_id"></el-table-column>
      <el-table-column label="投诉人ID"
                       prop="user_id"></el-table-column>
      <el-table-column label="举报类型"
                       prop="time_create">
        <template slot-scope="{ row }">
          {{TYPE_MAP[row.type]}}
        </template>
      </el-table-column>
      <el-table-column label="创建时间"
                       prop="time_create">
        <template slot-scope="{ row }">
          {{row.time_create | timeFilter}}
        </template>
      </el-table-column>
      <el-table-column label="标题"
                       prop="title"></el-table-column>
      <el-table-column label="等级"
                       prop="status">
        <template slot-scope="{ row }">
          {{row | taskLevelFilter}}
        </template>
      </el-table-column>
      <el-table-column label="审核状态"
                       prop="status">
        <!--审核状态 0待审核 1通过审核 2拒绝-->
        <template slot-scope="{ row }">
          {{STATUS_MAP[row.status]}}
        </template>
      </el-table-column>
      <el-table-column fixed="right"
                       label="操作"
                       width="145">
        <template slot-scope="{row}">
          <template v-if="isProcessing(row)">
            <el-button type="text"
                       size="small" @click="editRow(row)">审核
            </el-button>
          </template>
          <template v-else>
            <el-button type="text"
                       size="small" @click="editRow(row)">详情
            </el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination layout="total, prev, pager, next"
                   background
                   @current-change="fetch"
                   :current-page.sync="currentPage"
                   :page-size="limit"
                   style="display: flex;justify-content: center;"
                   :total="total">
    </el-pagination>
    <report-dialog ref="reportDialog"></report-dialog>
  </d2-container>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import commonCurd from '@/mixin/common-curd'
import reportDialog from '../components/report-dialog'

// 1:任务内容违规 2已过期，无法进行任务 3其他
const TYPE_MAP = {
  1: '任务内容违规',
  2: '已过期，无法进行任务',
  3: '其他'
}

const LEVEL_MAP = {
  1: '初级',
  2: '中级',
  3: '高级'
}

const STATUS_MAP = ['待审核', '通过审核', '拒绝']

export default {
  name: 'manage',
  data () {
    const _this = this
    return {
      query: {
        keywords: undefined,
        start_time: '',
        end_time: '',
        type: '',
        status: ''
      },
      LEVEL_MAP,
      TYPE_MAP,
      STATUS_MAP,
      startTimePickerOption: {
        disabledDate (date) {
          if (!_this.query.end_time > 0) {
            return false
          }
          const timestamp = (new Date(date)).getTime()
          return _this.query.end_time < timestamp
        }
      },
      endTimePickerOption: {
        disabledDate (date) {
          if (!_this.query.start_time > 0) {
            return false
          }
          const timestamp = (new Date(date)).getTime()
          return _this.query.start_time > timestamp
        }
      }
    }
  },
  mixins: [commonCurd],
  components: {
    reportDialog
  },
  async asyncData ({ store, route }) {
    return store.dispatch('task/report/fetchList', {
      page: 1,
      limit: 12
    })
  },
  computed: {
    ...mapGetters('task/report', ['list', 'total'])
  },
  methods: {
    ...mapActions('task/report', ['fetchList']),
    isProcessing ({ status }) {
      return status === 0
    },
    async editRow ({ id }) {
      await this.$refs.reportDialog.open(id)
      this.fetch()
    },
    onSubmit () {
      console.log('get')
      this.fetch(1)
    },
    onReset () {
      this.$refs.form.resetFields()
      this.data = this.$options.data
      this.fetch(1)
    }
  }
}
</script>

<style lang="scss" scoped>
  .fit-size {
    height: 259px;
  }

  .action-body {
    margin-left: 40px;
    margin-bottom: 18px;
  }
</style>
